<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>星辰宝宝成长记录</title>
    <style>
        :root {
            --primary-color: #f0f3f9;  /* 月白色 */
            --secondary-color: #e3d7c3; /* 米色 */
            --accent-color: #7a8b9f;   /* 青灰色 */
            --text-color: #4a4a4a;     /* 深灰色 */
        }

        body {
            font-family: '楷体', 'KaiTi', serif;
            background: linear-gradient(150deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            min-height: 100vh;
            padding: 2rem;
            color: var(--text-color);
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            padding: 2rem;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
        }

        .header {
            text-align: center;
            margin-bottom: 2rem;
            position: relative;
        }

        .header h1 {
            font-size: 2.5rem;
            color: var(--accent-color);
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }

        .data-card {
            background: white;
            border-radius: 12px;
            padding: 1.5rem;
            margin: 1rem 0;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
            border-left: 4px solid var(--accent-color);
        }

        .decorative-line {
            position: absolute;
            background: var(--accent-color);
            opacity: 0.2;
        }

        /* 中国风装饰线条 */
        .line-top {
            top: 0;
            left: -50px;
            width: 200%;
            height: 2px;
            transform: rotate(-3deg);
        }

        .age-item {
            margin: 0.5rem 0;
            font-size: 1.1rem;
        }

        .days-count {
            color: var(--accent-color);
            font-weight: bold;
            font-size: 1.2rem;
        }
    </style>
</head>
<body>
    <div id="app" class="container">
        <div class="header">
            <div class="decorative-line line-top"></div>
            <h1>✨ 星辰宝宝成长手册 ✨</h1>
        </div>

        <div class="data-card">
            <h2>🌙 出生日期</h2>
            <div class="age-item">{{ birthDate }}</div>
        </div>

        <div class="data-card">
            <h2>🌱 出生月龄</h2>
            <div class="age-item">{{ birthAge.months }}个月零{{ birthAge.days }}天</div>
            <div class="age-item">{{ birthAge.weeks }}周{{ birthAge.remainDays }}天</div>
            <div class="age-item">共<span class="days-count">{{ birthAge.totalDays }}</span>天</div>
        </div>

        <div class="data-card">
            <h2>🌠 矫正月龄</h2>
            <div class="age-item">{{ adjustedAge.months }}个月零{{ adjustedAge.days }}天</div>
            <div class="age-item">{{ adjustedAge.weeks }}周{{ adjustedAge.remainDays }}天</div>
            <div class="age-item">共<span class="days-count">{{ adjustedAge.totalDays }}</span>天</div>
        </div>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    birthDate: '2024年12月22日'
                }
            },
            computed: {
                birthAge() {
                    return this.calculateAge(new Date(2024, 11, 21)); // 月份从0开始计算
                },
                adjustedAge() {
                    return this.calculateAge(new Date(2025, 0, 25));
                }
            },
            methods: {
                calculateAge(targetDate) {
                    const today = new Date();
                    const timeDiff = today - targetDate;
                    const totalDays = Math.floor(timeDiff / (1000 * 3600 * 24));
                    
                    let months = 0;
                    let tempDate = new Date(targetDate);
                    while(tempDate <= today) {
                        tempDate.setMonth(tempDate.getMonth() + 1);
                        if(tempDate <= today) months++;
                    }
                    tempDate.setMonth(tempDate.getMonth() - 1);
                    const days = Math.floor((today - tempDate) / (1000 * 3600 * 24));

                    const weeks = Math.floor(totalDays / 7);
                    const remainDays = totalDays % 7;

                    return {
                        months,
                        days,
                        weeks,
                        remainDays,
                        totalDays: Math.abs(totalDays)
                    };
                }
            }
        }).mount('#app');
    </script>
</body>
</html>